import { onKeyStroke, useActiveElement, useMagicKeys, whenever } from "@vueuse/core";
import { cloneDeep } from "lodash-es";
import { formDesign } from "./useFormDesign";
import { FormDrawingItem } from "../types";
import { computed, ref } from "vue";
import { logicAnd } from "@vueuse/math";
import { operationHistory } from "../hooks/useOperationHistory";

export function useShortcutKey() {
  const keys = useMagicKeys();

  const { drawingList, activeData, activeIndex, createIdAndKey, deleteDrawingItem, syncAllItem, cleanDrawingItem } = formDesign;
  const { execute, undo, redo } = operationHistory;
  const activeElement = useActiveElement();
  const notUsingInput = computed(
    () =>
      activeElement.value?.tagName !== "INPUT" &&
      activeElement.value?.tagName !== "TEXTAREA" &&
      !activeElement.value?.isContentEditable
  );

  // 临时存储
  let tempData = ref<FormDrawingItem | null>(null);

  // 记录复制还是剪切
  let isCopy = ref(false);

  const copy = () => {
    tempData.value = activeData.value;
    console.log("ctrl_c");
    isCopy.value = true;
  };

  whenever(logicAnd(keys.ctrl_c, notUsingInput), () => {
    copy();
  });
  whenever(logicAnd(keys.command_c, notUsingInput), () => {
    copy();
  });

  const paste = () => {
    execute(drawingList.value);
    if (tempData.value) {
      if (isCopy.value) {
        let clone = cloneDeep(tempData.value);
        createIdAndKey(clone);
        if (activeIndex.value != -1) {
          // 在当前下标后面插入一个
          drawingList.value.splice(activeIndex.value + 1, 0, clone);
        } else {
          drawingList.value.push(cloneDeep(tempData.value));
        }
      } else {
        // 在该下标插入元素
        drawingList.value.splice(
          activeIndex.value != -1 ? activeIndex.value + 1 : drawingList.value.length - 1,
          0,
          cloneDeep(tempData.value)
        );
      }
      syncAllItem();
    }
  };
  whenever(logicAnd(keys.ctrl_v, notUsingInput), () => {
    paste();
  });
  whenever(logicAnd(keys.command_v, notUsingInput), () => {
    paste();
  });

  const operationUndo = () => {
    const list = undo(drawingList.value);
    if (list) {
      drawingList.value = list;
      syncAllItem();
    }
  };

  whenever(logicAnd(keys.ctrl_z, notUsingInput), () => {
    operationUndo();
  });

  whenever(logicAnd(keys.command_z, notUsingInput), () => {
    operationUndo();
  });

  const operationRedo = () => {
    const list = redo(drawingList.value);
    if (list) {
      drawingList.value = list;
      syncAllItem();
    }
  };

  whenever(logicAnd(keys.ctrl_shift_z, notUsingInput), () => {
    operationRedo();
  });

  whenever(logicAnd(keys.command_shift_z, notUsingInput), () => {
    operationUndo();
  });

  whenever(logicAnd(keys.ctrl_shift_s, notUsingInput), () => {
    syncAllItem();
  });

  const cut = () => {
    execute(drawingList.value);
    isCopy.value = false;
    if (activeData.value) {
      // 从数组移除该元素
      tempData.value = activeData.value;
      if (activeIndex.value != -1) {
        drawingList.value.splice(activeIndex.value, 1);
      }
      syncAllItem();
    }
  };

  whenever(logicAnd(keys.ctrl_x, notUsingInput), () => {
    cut();
  });

  whenever(logicAnd(keys.command_x, notUsingInput), () => {
    cut();
  });

  onKeyStroke(["ArrowUp"], () => {
    if (notUsingInput.value) {
      if (activeIndex.value !== 0) {
        activeIndex.value -= 1;
        activeData.value = drawingList.value[activeIndex.value];
      }
    }
  });

  onKeyStroke(["ArrowDown"], () => {
    if (notUsingInput.value) {
      if (activeIndex.value !== drawingList.value.length - 1) {
        activeIndex.value += 1;
        activeData.value = drawingList.value[activeIndex.value];
      }
    }
  });

  const moveUp = () => {
    execute(drawingList.value);
    if (activeIndex.value !== 0) {
      // 把数组当前元素和上一个元素交换位置
      let temp = drawingList.value[activeIndex.value];
      drawingList.value[activeIndex.value] = drawingList.value[activeIndex.value - 1];
      drawingList.value[activeIndex.value - 1] = temp;
    }
  };

  whenever(logicAnd(keys.ctrl_ArrowUp, notUsingInput), () => {
    moveUp();
  });

  whenever(logicAnd(keys.command_ArrowUp, notUsingInput), () => {
    moveUp();
  });

  const moveDown = () => {
    execute(drawingList.value);
    if (activeIndex.value !== drawingList.value.length - 1) {
      // 把数组当前元素和下一个元素交换位置
      let temp = drawingList.value[activeIndex.value];
      drawingList.value[activeIndex.value] = drawingList.value[activeIndex.value + 1];
      drawingList.value[activeIndex.value + 1] = temp;
    }
  };

  whenever(logicAnd(keys.ctrl_ArrowDown, notUsingInput), () => {
    moveDown();
  });

  whenever(logicAnd(keys.command_ArrowDown, notUsingInput), () => {
    moveDown();
  });
  whenever(logicAnd(keys.ctrl_alt_c, notUsingInput), () => {
    cleanDrawingItem();
  });

  whenever(logicAnd(keys.command_alt_c, notUsingInput), () => {
    cleanDrawingItem();
  });

  onKeyStroke(["Delete", "Backspace"], () => {
    if (notUsingInput.value) {
      console.log("Delete");
      deleteDrawingItem(activeData.value);
    }
  });

  return {
    operationRedo,
    operationUndo
  };
}
